import { Component, OnInit, ViewEncapsulation, Injector } from '@angular/core';
import { appModuleAnimation } from '@shared/animations/routerTransition';
import { AppComponentBase } from '@shared/common/app-component-base';
import { AnalysisServiceProxy, AnnualCostDto } from '@shared/service-proxies/service-proxies';
import G2 from '@antv/g2/build/g2';

@Component({
    templateUrl: './annual-cost.component.html',
    styleUrls: ['./annual-cost.componen.less'],
    encapsulation: ViewEncapsulation.None,
    animations: [appModuleAnimation()]
})
export class AnnualCostComponent extends AppComponentBase implements OnInit {
    tableData: Array<AnnualCostDto>;
    currentYear = new Date().getFullYear();
    constructor(injector: Injector, private _analysisService: AnalysisServiceProxy) {
        super(injector);
    }

    ngOnInit(): void {
        this.getData();
    }

    getData() {
        this._analysisService.getAnnualCost().subscribe(result => {
            this.tableData = result.items;
            this.initChart();
        });
    }

    initChart() {
        let data = [];

        this.tableData.forEach(el => {
            data.push({
                year: this.currentYear.toString(),
                type: el.costType,
                value: el.currentYearCost,
                增减金额: el.differCost,
                增减百分比: el.differPercentage
            });
            data.push({
                year: (this.currentYear - 1).toString(),
                type: el.costType,
                value: el.lastYearCost,
                增减金额: el.differCost,
                增减百分比: el.differPercentage
            });
        });

        let chart = new G2.Chart({
            container: 'c1',
            forceFit: true,
            padding: [50, 80, 80, 50]
        });
        chart.source(data);

        chart.axis('增减百分比', {
            title: {
                textStyle: {
                    fontSize: 14, // 文本大小
                    textAlign: 'center', // 文本对齐方式
                    fill: '#5254cf' // 文本颜色
                    // ...
                }
            },
            label: {
                textStyle: {
                    fill: '#5254cf'
                }
            }
        });

        chart
            .interval()
            .position('type*value')
            .color('year')
            .label('value')
            .adjust([
                {
                    type: 'dodge',
                    marginRatio: 1 / 32
                }
            ]);
        chart
            .line()
            .position('type*增减百分比')
            .color('#5254cf')
            .size(3)
            .shape('smooth');
        chart
            .point()
            .position('type*增减百分比')
            .color('#5254cf')
            .size(5)
            .shape('circle');
        chart.render();
    }
}
